// ratios
[clarus~=r1] { flex: 1 1; }
[clarus~=r2] { flex: 2 2; }
[clarus~=r3] { flex: 3 3; }
[clarus~=r4] { flex: 4 4; }
[clarus~=r5] { flex: 5 5; }
[clarus~=r6] { flex: 6 6; }
[clarus~=r7] { flex: 7 7; }
[clarus~=r8] { flex: 8 8; }
[clarus~=r9] { flex: 9 9; }

// horizontal and vertical flow
[clarus~=ltr] { flex-direction: row; }
[clarus~=rtl] { flex-direction: row-reverse; }
[clarus~=ttb] { flex-direction: column; }
[clarus~=btt] { flex-direction: column-reverse; }

// wrapping
[clarus~=wrap]    { flex-wrap: wrap; }
[clarus~=nowrap]  { flex-wrap: nowrap; }
[clarus~=reverse] { flex-wrap: wrap-reverse; }

// justify content
[clarus~=jc-start]   { justify-content: flex-start; }
[clarus~=jc-end]     { justify-content: flex-end; }
[clarus~=jc-center]  { justify-content: center; }
[clarus~=jc-between] { justify-content: space-between; }
[clarus~=jc-around]  { justify-content: space-around; }

// align content
[clarus~=ac-start]   { align-content: flex-start; }
[clarus~=ac-end]     { align-content: flex-end; }
[clarus~=ac-center]  { align-content: center; }
[clarus~=ac-stretch] { align-content: stretch; }
[clarus~=ac-between] { align-content: space-between; }
[clarus~=ac-around]  { align-content: space-around; }

// align items
[clarus~=ai-start]      { align-items: flex-start; }
[clarus~=ai-end]        { align-items: flex-end; }
[clarus~=ai-center]     { align-items: center; }
[clarus~=ai-stretch]    { align-items: stretch; }
[clarus~=ai-baseline]   { align-items: baseline; }
